<template>
  <div class="box">
    <div class="title">{{ infors.name }}</div>
    <div v-for="(item, index) in pglist" :key="index" class="item">
      <div class="tit">{{ index+1 }}.{{ item.title }}</div>
      <!-- 填空题 -->
      <div v-if="item.type == 'input' " style="width: 98%;margin: 10px auto">
        <el-collapse v-model="initem" @change="handleChange">
          <el-collapse-item title="点击展开全部" name="1">
            <div v-for="(initem,ini) in item.voteInfo" :key="ini" class="inputbox">
              <el-tooltip placement="top" effect="light">
                <div slot="content">姓名：{{ item.userInfo[ini].name }}<br>学号：{{ item.userInfo[ini].number }}</div>
                <el-button
                  style="
             display: block;
              width: 98%;
              margin: 20px auto 0;
              text-align: left;
              font-size: 18px;
              line-height: 20px;"
                >
                  {{ ini+1 }}:{{ initem }}
                </el-button>
              </el-tooltip>

            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 选择题 -->
      <div v-else class="tablebox">
        <table border="1" style="width: 100%;border-collapse:collapse;">
          <tr>
            <th>投票选项</th>
            <th>百分比示意图</th>
            <th>投票人数</th>
          </tr>
          <tr v-for="(tdcon , i) in item.textList" :key="i">
            <td style="width:30%">{{ tdcon }}</td>
            <td style="width: 50%"><el-progress :text-inside="true" :stroke-width="26" :percentage="(Math.round(item.voteInfo[i] / getall(item.voteInfo) * 10000) / 100.00)" /></td>
            <!-- <td style="width:20%;color:#120cee;cursor: pointer;">{{item.voteInfo[i]}}</td> -->
            <td style="width:20%;color:#120cee;cursor: pointer;">
              <el-popover
                placement="left"
                width="400"
                trigger="click"
              >
                <el-table :data="item.userInfo[i]">
                  <el-table-column property="name" label="姓名" />
                  <el-table-column property="number" label="学号" />
                </el-table>
                <el-button slot="reference" style="width:100%">{{ item.voteInfo[i] }}</el-button>
              </el-popover>
            </td>
          </tr>
          <tr>
            <td width="100% " colspan="3" style="padding:0">
              <div class="num"> 共有 <span>{{ item.voteUser.length }}</span> 人参加本项调查 </div>
            </td>
          </tr>
        </table>

      </div>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import { votevoteAnswerCount } from '@/api/vote'
import { listQueryFilter } from '@/utils/tool'
// import { isInteger } from '@/utils/validate'

export default {
  name: 'PingGu',
  directives: { waves },
  data() {
    return {
      listQuery: {
        voteId: this.$route.query.voteId,
        courseTimetableId: this.$route.query.courseTimetableId
      },
      pglist: [],
      infors: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取调查问卷统计信息
    getList() {
      this.listQuery = listQueryFilter(this.listQuery)
      votevoteAnswerCount(this.listQuery).then(response => {
        console.log(response)
        this.infors = response.data
        this.pglist = response.data.itemList
      })
    },
    // 数组求和
    getall(item) {
      var sum = 0
      for (var i = 0; i < item.length; i++) {
        sum = sum + item[i]
      }
      return sum
    }
  },
  handleChange(val) {
    console.log(val)
  }

}
</script>
<style lang="scss" scoped>
  .box{
    width: 95%;
    border-width: 2px;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
    margin: 20px auto;
    overflow: hidden;
    .title{
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      padding: 20px 5px;
    }
  }
  .item{
    width: 95%;
    margin: 10px auto 20px;
    background-color: #f7f7f7;
    overflow: hidden;
    .tit{
      padding: 20px 10px 0;
      text-align: left;
      font-size: 18px;
      color: #333333;

    }
    .tablebox{
      width: 98%;
      margin: 20px auto;
        font-size: 16px;

      th{
        text-align: left;
        background-color: #767575;
        color: #fff;
        font-size: 18px;
        font-weight: 300;
        padding: 5px 7px;

      }
      td{
        padding: 5px 7px;
      }
      .num{
        width: 100%;
        text-align: center;
        background-color: #ccc;
        color: #333;
        width: 100%;
        line-height: 30px;
        span{
          color:#120cee;
        }
      }
    }
  }
</style>

